/*
 * @Author: Setsuna
 * @Email: 601890383@qq.com
 * @FilePath: \src\pages\QuotaManage\InventoryTransfer\components\AddInventoryTransfer.tsx
 * @Date: 2021-12-03 15:54:40
 * @LastEditTime: 2022-01-14 12:28:55
 */
import apis from '@/apis/AboutQuota'
import UdSelect from '@/components/UdFormControls/UdSelect'
import { http, UdForm, UdMonthPicker, validators } from '@/lib'
import { Input, InputNumber, message, Select, Spin, DatePicker, Button } from 'antd'
import { WrappedFormUtils } from 'antd/lib/form/Form'
import TextArea from 'antd/lib/input/TextArea'
import React, { Component } from 'react'
const { Option } = Select
interface Props {
  brandCompanies: Array<any>
}

export default class AddInventoryTransfer extends Component<Props, any> {
  private labelCol: any = { span: 4 }
  private wrapperCol: any = { span: 20 }
  private form: WrappedFormUtils
  state = {
    uploading: false,
    downloading: false,
    prodList: [],
    dealerList: [],
  }

  componentDidMount(): void {
      this.getProdNameList()
  }

  private onOk = e => {
    this.form.validateFields((err, values) => {
      if (!err) {
        let params = {
          brandCode: values.brand['key'],
          brandName: values.brand['label'],
          dealerCode: values.dealer['key'],
          dealerName: values.dealer['label'],
          prodBarcode: values.prod['key'],
          prodName: values.prod['label'],
          inventoryCycle: values.inventoryCycle,
          number: values.number,
          remark: values.remark,
        }
        e.drawerBtnLoading()
        http
          .post(apis.addCheckTransfer, params)
          .then(res => {
            message.success('操作成功')
            e.close()
          })
          .catch(() => {
            e.drawerBtnLoadingHide()
          })
      } else {
        console.log(err)
      }
    })
  }

  private getDealerList = param => {
    this.form.setFieldsValue({ dealer: undefined }, () => {
      this.setState({ dealerList: [] }, () => {
        let formValues = this.form.getFieldsValue(['brand', 'inventoryCycle', 'prod'])
        let params = { ...formValues, ...param }
        if (params?.brand && params?.inventoryCycle && params?.prod) {
          http
            .get(apis.getDealerList, {
              params: {
                inventoryCycle: params.inventoryCycle,
                brandCode: params.brand['key'],
                prodBarcode: params.prod['key'],
              },
            })
            .then(res => {
              const { data = [] } = res ?? {}
              this.setState({ dealerList: data })
            })
        }
      })
    })
  }

  private getProdNameList = () => {
      http.get(apis.getProdNameByBrandCode).then(res => {
        const { data = [] } = res ?? {}
        this.setState({ prodList: data })
      })
  }

  render() {
    let { brandCompanies } = this.props
    let { prodList, dealerList } = this.state
    return (
      <Spin
        spinning={this.state.uploading || this.state.downloading}
        tip={this.state.uploading ? '上传中，请稍后...' : '下载中，请稍后...'}
      >
        <UdForm
          getForm={form => (this.form = form)}
          labelCol={this.labelCol}
          wrapperCol={this.wrapperCol}
          items={[
            {
              label: '销售组织',
              id: 'brand',
              rules: [validators.required],
              render: () => (
                <Select
                  optionFilterProp="children"
                  showSearch
                  placeholder="请选择品牌公司"
                  labelInValue
                  allowClear={false}
                >
                  {brandCompanies.map(({ value, title }) => (
                    <Option key={value} value={value}>
                      {title}
                    </Option>
                  ))}
                </Select>
              ),
            },
            {
              id: 'inventoryCycle',
              label: '盘点周期',
              rules: [validators.required],
              render: (
                <UdMonthPicker
                  allowClear={false}
                  onChange={value => {
                    this.getDealerList({ inventoryCycle: value })
                  }}
                  placeholder="请选择盘点周期"
                  style={{ width: '100%' }}
                  className={'ext'}
                />
              ),
            },
            {
              id: 'prod',
              label: '物料描述',
              rules: [validators.required],
              render: () => (
                <Select
                  optionFilterProp="children"
                  allowClear={false}
                  placeholder="请选择物料描述"
                  labelInValue
                  showSearch
                  onChange={value => {
                    this.getDealerList({ prod: value })
                  }}
                >
                  {prodList.map(({ prodBarcode, prodName }) => (
                    <Option key={prodBarcode} value={prodBarcode}>
                      {prodName}
                    </Option>
                  ))}
                </Select>
              ),
            },
            {
              id: 'dealer',
              label: '客户名称',
              rules: [validators.required],
              render: () => (
                <Select
                  placeholder="请选择客户名称"
                  optionFilterProp="children"
                  labelInValue
                  showSearch
                  allowClear={false}
                >
                  {dealerList.map(({ dealerCode, dealerName }) => (
                    <Option key={dealerCode} value={dealerCode}>
                      {dealerName}
                    </Option>
                  ))}
                </Select>
              ),
            },
            {
              id: 'number',
              label: '调入调出',
              rules: [validators.required],
              render: () => <InputNumber style={{ width: '100%' }} precision={0} />,
            },
            {
              id: 'remark',
              label: '备注信息',
              render: <TextArea rows={3} maxLength={200} />,
            },
          ]}
        />
      </Spin>
    )
  }
}
